import React, { Component, cloneElement } from 'react';
import PropTypes from 'prop-types';
import { View, TouchableOpacity, StyleSheet,Dimensions } from 'react-native';

const {width,height}=Dimensions.get('window');


import ToolItem from './SearchToolItem';
import ToolSelect from './SearchToolSelect';
import ToolMultiSelect from './SearchToolMultiSelect';
import {px} from "../../utils/ScreenUtil";

/**
 * 搜索工具视图组件类
 *  - children 一般为搜索结果组件，搜索工具栏在children上方。
 */
export default class SearchToolBar extends Component {
	static propTypes = {
		/* 搜索工具栏组件对其方式（默认为 'center'） */
		justifyContent: PropTypes.string,
	}

	static Item = ToolItem;
	static Select = ToolSelect;
	static MultiSelect = ToolMultiSelect;

	state = {
		showModal: false,  /* 打开搜索工具窗口 */
		modalTop: 0,       /* 搜索工具窗口top值 */
	}

	componentWillMount() {
		this.returnRef();
	}

	/**
	 * 返回组件实例方法
	 * @return {void}
	 */
	returnRef = () => {
		this.props.returnRef({
			close: this.closeModal
		});
	}

	/**
	 * 渲染搜搜工具栏组件
	 * @return {ReactComponent} 搜索工具组件数组
	 */
	renderContent = () => {
		const { showModal } = this.state;

		return this.props.content.map((item, i) => {
			return cloneElement(item, {
				key: i,
				toolKey: i,
				openModal: this.openModal,
				closeModal: this.closeModal,
				showModal,
				openModalKey: this._openModalKey,
			});
		});
	}

	/**
	 * 获取工具窗口组件
	 * @return {ReactComponent}
	 */
	getChildrenComps = () => undefined;

	/**
	 * 当前打开窗口对应按钮的key
	 * @type {Nunber}
	 */
	_openModalKey = -1;

	/**
	 * 打开搜索工具窗口
	 * @return {void}
	 */
	openModal = (toolKey, resultComps) => {
		this.getChildrenComps = resultComps;
		this._openModalKey = toolKey,
		this._viewRef.measure((...arg) => {
			this.setState({
				showModal: true,
				modalTop: arg[3],
			});
		});
	}

	/**
	 * 关闭搜索工具窗口
	 * @return {void}
	 */
	closeModal = () => {
		this._openModalKey = undefined,
		this.setState({
			showModal: false,
		});
	}

	/**
	 * 渲染工具弹出窗口组件
	 * @return {ReactComponent}
	 */
	renderSearchModal = () => {
		const { showModal, modalTop } = this.state;
		if(showModal) {
			return (
				<TouchableOpacity
					style={[styles.toolBackground, {top: modalTop}]}
					onPress={this.closeModal}
					activeOpacity={1}
				>
					<View>{this.getChildrenComps()}</View>
				</TouchableOpacity>
			);
		}
	}

	render() {
		const {
			justifyContent = 'center',
			children,
			style = {},
			backgroundColor = '#fff',
		} = this.props;

		return (
			<View style={{flex: 1}}>
				<View
					ref={ref => this._viewRef = ref}
					style={[styles.filterBar, {justifyContent, backgroundColor}]}
				>
					{this.renderContent()}
				</View>
				{children}
				{this.renderSearchModal()}
			</View>
		);
	}
}

const styles = StyleSheet.create({
	filterBar: {
		flexDirection: 'row',
		alignItems: 'center',
		borderColor: '#eee',
		borderBottomWidth: 1,
		paddingLeft: px(10),
		paddingRight: px(10),
	},
	toolBackground: {
		position: 'absolute',
		top: 0,
		left: 0,
		width: width,
		height: height,
		backgroundColor: 'rgba(0, 0, 0, 0.4)',
	}
});